<template>
  <div>
    <div>
      <el-select v-model="selectValue" multiple filterable remote reserve-keyword placeholder="请搜索并选择内容" :remote-method="remoteMethod" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <!-- <div>{{ value }}</div>
    <div>
      <el-select v-model="value" placeholder="请选择" filterable remote reserve-keyword :remote-method="remoteMethod">
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div class="city-item">
            <div style="width: 8rem;">{{ item.label }}</div>
            <div style="width: 8rem; color: #8492a6; font-size: 13px">{{ item.value }}</div>
            <div style="width: 10rem; color: #8492a6; font-size: 13px">{{ item.address }}</div>
          </div>
        </el-option>
      </el-select>
    </div> -->
    <div>{{ remoteValue }}</div>
    <div>
      <el-select
        v-model="remoteValue"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
          v-for="item in cities2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div class="city-item">
            <div style="width: 8rem;">{{ item.label }}</div>
            <div style="width: 8rem; color: #8492a6; font-size: 13px">{{ item.value }}</div>
            <div style="width: 10rem; color: #8492a6; font-size: 13px">{{ item.address }}</div>
          </div>
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestPrescription',
  data() {
    return {
      selectValue: [1, 2],
      options: [{value: 1, label: '张三'}, { value: 2, label: '李四'}, { value: 3, label: '李3'}, { value: 4, label: '李4'}],
      cities: [
        { value: 'Beijing', label: '北京', address: '北京市朝阳区' },
        { value: 'ShanghaiPudong', label: '上海浦东', address: '上海市浦东新区' },
        { value: 'ShanghaiJinan', label: '上海静安', address: '上海市静安区' },
        { value: 'Nanjing', label: '南京', address: '江苏省南京市鼓楼区' },
        { value: 'Chengdu', label: '成都', address: '成都市高新区' },
        { value: 'Shenzhen', label: '深圳', address: '深圳市南山区' },
        { value: 'Guangzhou', label: '广州', address: '广州市天河区' },
        { value: 'Wuhan', label: '武汉', address: '武汉市洪山区' }
      ],
      cities2:[],
      value: '',
      remoteValue: ''  
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.cities2 = this.cities.filter(item => {
            return item.address.toLowerCase().indexOf(query.toLowerCase()) > -1;
          })
        }, 200)
      } else {
        this.cities2 = [];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.city-item {
  display: flex;
  // width: 30rem;
  // justify-content: space-between;
  overflow-x: auto;
  // align-items: center;
  // padding: 0.5rem 1rem;
  // border-bottom: 1px solid #f0f0f0;

}
</style>